<%@page import="com.wanmait.hotelManagement.vo.Passenger"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="com.wanmait.hotelManagement.vo.RoomType"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%String path = request.getContextPath();%>
<%SimpleDateFormat date = new SimpleDateFormat("yyyy-MM-dd"); %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>下单</title>
<!-- Stylesheets -->
<link href="<%=path%>/hotel/reservation/css/bootstrap.css" rel="stylesheet">
<link href="<%=path%>/hotel/reservation/css/revolution-slider.css" rel="stylesheet">
<link href="<%=path%>/hotel/reservation/css/style.css" rel="stylesheet">

<!--Favicon-->
<link rel="shortcut icon" href="<%=path%>/hotel/reservation/images/favicon.ico" type="image/x-icon">
<link rel="icon" href="<%=path%>/hotel/reservation/images/favicon.ico" type="image/x-icon">

<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="<%=path%>/hotel/reservation/css/responsive.css" rel="stylesheet">

<!-- 日历css -->
<link rel="stylesheet" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">
<link href="<%=path%>/hotel/reservation/css/foundation.min.css" rel="stylesheet" type="text/css">
<link href="<%=path%>/hotel/reservation/css/foundation-datepicker.css" rel="stylesheet" type="text/css">

<script src="<%=path %>/hotel/layui.js"></script>
<!-- 日历css结束 -->
</head>


<body>

	<!-- Main Header -->
    <%-- <jsp:include page="/hotel/include/head.jsp"></jsp:include> --%>
    <!--End Header Upper-->
<div class="page-wrapper">

    <!-- .preloader -->
    <div class="preloader"></div>
    <!-- /.preloader -->
    
    <!-- main header area -->
    
    <!--End Sticky Header-->
    <!-- main header area end -->

     <!--Page Title-->
    <section class="page-title text-center">
        <div class="auto-container">
            <div class="content-box">
                <div class="title">房间详情</div>
                <ul class="bread-crumb">
                    <li><a href="<%=path%>/IndexServlet">首页<i class="fa fa-angle-right"></i></a></li>
                    <li>预约</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- rooms details section -->
    <section class="rooms-details">
    	<div class="container">
    		<div class="row">
    			<div class="col-md-8 col-sm-8 col-xs-12">
    			<%RoomType roomType = (RoomType)request.getAttribute("roomType");%>
    				<div class="rooms-details-content">
    					<div class="img-box">
    						<figure><img src="<%=path%>/hotel/images/room/<%=roomType.getPictures().get(0).getImages()%>" alt=""></figure>
    					</div>
    					<div class="lower-content">
    						<h2><%=roomType.getRoomName() %></h2>
    						<div class="text"><span>￥<%=roomType.getRoomPrice() %></span> / 一晚</div>
    						<!-- <ul class="rating">
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    							<li><i class="fa fa-star" aria-hidden="true"></i></li>
    						</ul> -->
    						<p><%=roomType.getRemarks() %></p>
    					</div>
    					<div class="rooms-catagori">
    						<h3>房间设施</h3>
    						<div class="row">
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>电视</li>
    									<li>无线网络</li>
    									<li>早餐</li>
    								</ul>
    							</div>
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>水疗</li>
    									<li>浴缸</li>
    									<li>报纸</li>
    								</ul>
    							</div>
    							<div class="col-md-4 col-sm-4 col-xs-12">
    								<ul class="list">
    									<li>小型酒吧</li>
    									<li>健身房</li>
    									<li>会议室</li>
    								</ul>
    							</div>
    						</div>
    					</div>
    					
    				</div>
    			</div>
    			<form action="ReservationServlet?action=submitInfo" method="post">
    			<div class="col-md-4 col-sm-6 col-xs-12">
    				<div class="sidbar-content">
	    				<h3>预订房间</h3><br>
	    				<input type="hidden" value="<%=roomType.getId()%>" name="roomTypeId">
	    				<!-- =============================================== -->
	    				<%Passenger loginUser = (Passenger)session.getAttribute("loginUser"); %>
	    				<input type="hidden" value="<%=loginUser.getId()%>" name="passengerId">
	                    <!-- =============================================== -->
	                    <div class="date">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	    					入住日期<span style="color:red;">*</span><input type="text" class="span2" value="" id="dpd1" name="arriveDate"><span></span><br>
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	                    	离开日期<span style="color:red;">*</span><input type="text" class="span2" value="" id="dpd2" name="leaveDate"><span></span>
	                    	
	                    	<!-- <i class="fa fa-calendar" aria-hidden="true"></i>
	    					<input type="text" name="date" placeholder="Araival date" id="datepicker">
	                    	<i class="fa fa-calendar" aria-hidden="true"></i>
	                    	<input type="text" name="date" placeholder="Departure date" id="datepickerone"> -->
	                  	</div>
	                    	房间数量
	                    <select name="roomCount" class="custom-select-box1" id="roomCount">
	                    <%for(int i=0; i<=roomType.getRoomCount(); i++)
	                    {
	                    	if(i>=10)
	                    	{
	                    		break;
	                    	}
	                    	else
	                    	{%>
	                    		<option value="<%=i+1%>"><%=i+1 %></option>
	                    	<%}
	                    }%>
	                        <!-- <option>Adults</option>
	                        <option>18 years</option>
	                        <option>20 years</option>
	                        <option>25 years</option>
	                        <option>30 years</option> -->
	                    </select><br><br>
	                    	住客姓名<span style="color:red;">*</span>
	                    <input type="text" placeholder="每间填1位住客姓名" class="liveName" name="liveName"><p></p>
	                    <span id="name"></span>
	            	    	    房间备注
	                    <textarea style="resize:none; width:100%; border:1px solid #e5e5e5;" name="remarks"></textarea>
	                    <%-- <select class="custom-select-box">
	                        <option>Children</option>
	                        <option>5 years</option>
	                        <option>8 years</option>
	                        <option>12 years</option>
	                        <option>15 years</option>
	                    </select>
	                    <select class="custom-select-box">
	                        <%
	                        for(int i=1;i<=10;i++){
	                        %>
	                        	<option><%=i %></option>
	                        <%	
	                        }
	                        %>
	                    </select> --%>
	                    <input type="submit" id="submit" class="btn-one" value="提交订单">
	                    <!-- <a href="" class="btn-one"></a> -->
	    			</div>
    			</div>
    			</form>
    		</div>
    	</div>
    </section>
    <!-- rooms details section end -->

    <!-- subscribe section -->
    
    <!-- subscribe section end -->

    <!-- main footer area -->
    
    <!-- main footer area end -->
    
</div>
<!--End pagewrapper-->


<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-angle-up"></span></div>

	<!-- Main Footer -->
    <%-- <jsp:include page="/hotel/include/footer.jsp"></jsp:include> --%>
    <!-- Main Footer End-->

<!-- 日历js -->
<script src="<%=path%>/hotel/reservation/js/jquery-1.11.3.min.js"></script>
<script src="<%=path%>/hotel/reservation/js/foundation-datepicker.js"></script>
<script src="<%=path%>/hotel/reservation/js/locales/foundation-datepicker.zh-CN.js"></script>	


<script type="text/javascript">
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#dpd1').fdatepicker({
	onRender: function (date) {
		return date.valueOf() < now.valueOf() ? 'disabled' : '';
	}
}).on('changeDate', function (ev) {
	if (ev.date.valueOf() > checkout.date.valueOf()) {
		var newDate = new Date(ev.date)
		newDate.setDate(newDate.getDate() + 1);
		checkout.update(newDate);
	}
	checkin.hide();
	$('#dpd2')[0].focus();
}).data('datepicker');
var checkout = $('#dpd2').fdatepicker({
	onRender: function (date) {
		return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
	}
}).on('changeDate', function (ev) {
	checkout.hide();
}).data('datepicker');
</script>
<!-- 日历js结束 -->


<script type="text/javascript">
/* 预定成功提示 */
$(function(){
	<%String submit = request.getParameter("submit");
	if("success".equals(submit))
	{%>
		messageBoxSuccess("预定成功");
	<%}%>
})
 /* 提示结束 */
$(function(){
	$("#roomCount").change(function(){
		var count = $(this).val();
		$("#name").html("");
		for(var i=1; i<count; i++)
		{
			var text = $("<input type='text' placeholder='每间填1位住客姓名' class='liveName' name='liveName'><p></p>");
			$("#name").append(text);
		}
		addCheck();
	});
});
/* 入住信息验证 */
$(function(){
	$(".liveName").blur(check);
	$("#submit").click(function(){
		if($("#dpd1").val()==""||$("#dpd2").val()==""||$(".liveName").val()=="")
		{
			messageBox("*部分不能为空");
			return false;
		}
	});
})

function check(){
	var val = $(this).val();
	if(val=="")
	{
		messageBox("每间房间需要一个住客姓名");
	}
}

function addCheck(){
	$(".liveName").each(function(){
		$(this).blur(check);
	})
}

function messageBox(mes){
	layui.use('layer', function(){
	  var layer = layui.layer;
	  layer.msg(mes, {icon: 2});
	});
}

function messageBoxSuccess(mes){
	layui.use('layer', function(){
	  var layer = layui.layer;
	  layer.msg(mes, {icon: 1});
	});
}
/* 入住信息验证结束 */

</script>	

<!-- jQuery js -->
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyCRvBPo3-t31YFk588DpMYS6EqKf-oGBSI"></script>
<script src="<%=path%>/hotel/reservation/js/map-script.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery-2.1.4.js"></script>
<script src="<%=path%>/hotel/reservation/js/bootstrap.min.js"></script>
<script src="<%=path%>/hotel/reservation/js/jquery.themepunch.tools.min.js"></script>
<script src="<%=path%>/hotel/reservation/js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.slideanims.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.layeranimation.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.navigation.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.kenburn.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.actions.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.parallax.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/revolution.extension.migration.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery.appear.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery.countTo.js"></script>
<script src="<%=path%>/hotel/reservation/js/isotope.js"></script>
<script src="<%=path%>/hotel/reservation/js/jquery.fancybox.pack.js"></script>
<script src="<%=path%>/hotel/reservation/js/jquery.fancybox-media.js"></script>
<script src="<%=path%>/hotel/reservation/js/owl.js"></script>
<script src="<%=path%>/hotel/reservation/js/masterslider.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery.polyglot.language.switcher.js"></script>
<script src="<%=path%>/hotel/reservation/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/jquery.mixitup.min.js"></script>
<script src="<%=path%>/hotel/reservation/js/validate.js"></script>
<script src="<%=path%>/hotel/reservation/js/wow.js"></script>
<script src="<%=path%>/hotel/reservation/js/script.js"></script>    
<script type="text/javascript" src="<%=path%>/hotel/reservation/js/theme.js"></script>
<script src="<%=path%>/hotel/reservation/js/map-script.js"></script>
<script src="<%=path%>/hotel/reservation/js/timePicker.js"></script>
<script src="<%=path%>/hotel/reservation/js/jquery-ui.js"></script>
<script src="<%=path%>/hotel/reservation/js/gmaps.js"></script>
<script src="<%=path%>/hotel/reservation/js/map-helper.js"></script>
<script src="<%=path%>/hotel/reservation/js/validation.js"></script>


<!-- End of .page_wrapper -->

</body>
</html>
    